<meta charset="UTF-8">
<body>
    <h1>0</h1>
</body>
<script>
setInterval(function() {  
    var fontObj = document.createElement('div')
    fontObj.className = 'font'
    var min = 0
    var max = 25
    var index = Math.floor(  Math.random() * (max-min+1)+min )
    fontObj.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWSYZ'.split('')[index] 
    var leftMin = 0
    var leftMax = (window.innerWidth || document.documentElement.clientWidth)
    var left =  Math.floor( Math.random()* (leftMax-leftMin+1)+leftMin)
    var topMin = 0
    var topMax = (window.innerHeight || document.documentElement.clientHeight) 
    var top =  Math.floor( Math.random()* (topMax-topMin+1)+topMin)
    fontObj.style.position = 'absolute'
    fontObj.style.left = left + 'px'
    fontObj.style.top = top + 'px'
    document.body.appendChild(fontObj)
}, 500)

document.onkeyup = function(evt) {
    var e = evt || window.event
    console.log('你松开键盘啦', e.key)
    var fonts = document.querySelectorAll('div.font')
    fonts.forEach(function(item) { 
        if (item.innerText.toLowerCase() === e.key.toLowerCase())
        {

            document.body.removeChild(item)
            
            var num = parseInt(document.querySelector('h1').innerText)
            document.querySelector('h1').innerText = num+1
        }

    })
}
</script>
